<template>
  <div class="dashboard-nav">
    <nav-card
      v-for="item in navItems"
      :key="item.route"
      :title="item.title"
      :icon="item.icon"
      @click="navigateTo(item.route)"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import NavCard from '/src/views/DigitalTwin/monitor/Navigation/NavCard.vue';

  const router = useRouter();

  const navItems = ref([
    {
      title: '总览',
      route: '/digital-home/monitor/overview', // 精确匹配路由路径
    },
    {
      title: '控制中心',
      route: '/digital-home/monitor/control',
    },
  ]);

  const navigateTo = (route) => {
    router.push(route);
  };
</script>

<style scoped>
  .dashboard-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 15px;
    height: 100%;
  }
</style>